Using the :has() Pseudo-Class in CSS
The :has() pseudo-class in CSS allows you to select elements that contain certain descendants or match specific conditions. It works like a parent selector, which was previously difficult to achieve with CSS alone.
:has(selector)selects elements that have at least one descendant matching the selector inside them.It enables styling of a parent based on the state or presence of its children, something CSS could not do reliably before.
Can be combined with other pseudo-classes, e.g.,
:has(:checked)to style a container if a checkbox inside it is checked.Reduces the need for extra JavaScript for dynamic styling based on child elements.
In this example, when any checkbox inside .form-section is checked, the parent container receives a green border and light green background, providing immediate visual feedback without JavaScript.
Use
:has()to apply styles based on child elements or states.Combine with
:not()and other pseudo-classes for more precise targeting.Be aware of browser support; older browsers may not support
:has().Keep selectors readable and avoid overly complex nested
:has()for maintainability.